<div class="subscription_settings" data-stream-id="{{sub.stream_id}}">
    <div class="inner-box">
        <div class="alert stream_change_property_info"></div>
        {{#with sub}}
        <div class="stream-header">
            {{#if invite_only}}
            <div class="large-icon lock" style="color: {{color}}">
                <i class="fa fa-lock" aria-hidden="true"></i>
            </div>
            {{else if is_web_public}}
            <div class="large-icon" style="color: {{color}}">
                <i class="fa fa-globe" aria-hidden="true"></i>
            </div>
            {{else}}
            <div class="large-icon hash" style="color: {{color}}"></div>
            {{/if}}
            <div class="stream-name">
                <span class="stream-name-editable editable-section">{{name}}</span>
                {{#if can_change_name_description}}
                <span class="editable" data-make-editable=".stream-name-editable"></span>
                <span class="checkmark" data-finish-editing=".stream-name-editable">✓</span>
                {{/if}}
            </div>
            <div class="button-group">
                {{#if is_admin}}
                <button class="button small rounded btn-danger deactivate" type="button" name="delete_button" title="{{t 'Delete stream'}}"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
                {{/if}}
                <div class="sub_unsub_button_wrapper inline-block">
                    <button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}}title="{{t 'Toggle subscription'}} (S)" {{else}}disabled="disabled"{{/if}}>
                        {{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
                </div>
                <a href="{{preview_url}}" class="button small rounded" id="preview-stream-button" role="button" title="{{t 'View stream'}} (V)" {{#unless should_display_preview_button }}style="display: none"{{/unless}}>{{t "View stream"}}</a>
            </div>
        </div>
        <div class="stream-description">
            <span class="stream-description-editable editable-section description rendered_markdown" data-no-description="{{t 'No description.' }}">{{{rendered_description}}}</span>
            {{#if can_change_name_description}}
            <span class="editable" data-make-editable=".stream-description-editable"></span>
            <span class="checkmark" data-finish-editing=".stream-description-editable">✓</span>
            {{/if}}
        </div>
        <div class="subscription-type">
            <div class="subscription-type-text">
                {{> subscription_type}}
            </div>
            <a class="change-stream-privacy" {{#unless can_change_stream_permissions}}style="display: none;"{{/unless}}>[{{t "Change" }}]</a>
        </div>
        {{/with}}
        <div class="regular_subscription_settings collapse {{#sub.subscribed}}in{{/sub.subscribed}}">
            <div class="subscription-config">
                <ul class="grey-box">
                    {{#each settings}}
                    <li>
                        {{> stream_settings_checkbox
                          setting_name=name
                          prefix="sub_"
                          suffix="_setting"
                          is_checked=value
                          is_muted=(lookup ../sub "is_muted")
                          stream_id=(lookup ../sub "stream_id")
                          notification_setting=is_notification_setting
                          realm_setting_disabled=(lookup ../realm_settings name)
                          label=label}}
                    </li>
                    {{/each}}
                    <li>
                        <label for="streamcolor" class="subscription-control-label">{{t "Stream color" }}</label>
                        <span class="sub_setting_control">
                            <input stream_id="{{sub.stream_id}}" class="colorpicker" id="streamcolor" type="text" value="{{sub.color}}" tabindex="-1" />
                        </span>
                    </li>
                </ul>
            </div>
            <div class="stream-email-box" {{#unless sub.email_address}}style="display: none;"{{/unless}}>
                <div class="sub_settings_title">{{t "Email address" }} <i class="fa fa-question-circle stream-email-hint" aria-hidden="true"></i></div>
                <div class="stream-email">
                    <span class="email-address">{{sub.email_address}}</span>
                </div>
            </div>
        </div>
        {{#with sub}}
        <div class="subscription-members-setting">
            {{> subscription_members}}
        </div>
        {{/with}}
    </div>
</div>
